<template>
  <!--安监-安监人员监督日志 -->
  <base-breadcrumb
    :title="$route.meta.title"
    class="monitorLogList"
  >
    <!-- 搜索 -->
    <a-tabs
      default-active-key="1"
      @change="callback"
    >
      <a-tab-pane
        key="1"
        tab="安监人员监督日志"
      >
        <searchData
          :searchData="searchArr"
          @search="search"
        ></searchData>
        <!-- 表格 -->
        <a-card :bordered="false">
          <!-- <title-name :title="$route.meta.title"></title-name> -->
          <a-button
            class="mb12"
            icon="plus"
            type="primary"
            @click="handleManage(2)"
            v-btnPermission="'hse_012_add_01'"
          >新增</a-button>
          <!-- 表格 -->
          <list-table
            ref="table"
            tableLayout="fixed"
            size="default"
            :columns="columns"
            :request="loadData"
            row-key="key"
            :alert="true"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          >
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a
                v-btnPermission="'hse_012_loo_04'"
                @click="handleManage(0, record)"
              >查看</a>
              <a-divider
                v-btnPermission="'hse_012_loo_04'"
                type="vertical"
              />
              <a @click="handleSummary(record)">本月汇总</a>
            </template>
          </list-table>
        </a-card>
      </a-tab-pane>
      <a-tab-pane
        key="2"
        tab="项目安监日志"
        force-render
      >
        <searchData
          :searchData="searchArrTwo"
          @search="searchTwo"
        ></searchData>
        <!-- 表格 -->
        <a-card :bordered="false">
          <!-- <title-name :title="$route.meta.title"></title-name> -->
          <a-button
            class="mb12"
            icon="plus"
            type="primary"
            @click="handleManage(2)"
            v-btnPermission="'hse_012_add_01'"
          >新增</a-button>
          <!-- 表格 -->
          <list-table
            ref="tableTwo"
            tableLayout="fixed"
            size="default"
            row-key="key"
            :columns="columnsTwo"
            :request="loadDataTwo"
            :alert="true"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          >
            <template
              slot="action"
              slot-scope="text, record"
            >
              <a
                v-btnPermission="'hse_012_loo_05'"
                @click="handleManage(0, record)"
              >查看</a>
              <!-- <a-divider type="vertical" />
              <a @click="handleSummary(record)">本月汇总</a> -->
            </template>
          </list-table>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-modal
      title="本月汇总（填报人）"
      :visible="visible"
      :width="700"
      @cancel="handleCancel"
      cancel-text="关闭"
      class="handleCancel"
    >
      <div :style="{ width: '600px', height: '350px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
        <a-calendar
          :fullscreen="false"
          @panelChange="onPanelChange"
        >
          <div
            slot="dateCellRender"
            slot-scope="value"
            class="events"
          >
            <div
              v-for="item in getListData(value)"
              :key="item.content"
            >
              <span :class="item.type*1===1?'active':''">{{ item.content }}</span>
            </div>
          </div>
        </a-calendar>
      </div>
    </a-modal>
  </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getPageSafeSupervisionLog, getNowMonthData } from '@/api/safetySupervision/monitorLog'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject'
import OrgTreeSelect from '@/components/OrgTreeSelect'
import BasePage from '@/views/basePage' // 基础配置

export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    STable,
    SelectSubCompany
  },
  data() {
    return {
      queryParam: {}, // 查询参数
      loadData: async (parameter) => {
        this.queryParam.queryTypeNum = 1
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return getPageSafeSupervisionLog(requestParameters).then((res) => {
          return res
        })
      },
      loadDataTwo: async (parameter) => {
        this.queryParam.queryTypeNum = 2
        const requestParameters = Object.assign({}, parameter, { query: this.queryParam })
        return getPageSafeSupervisionLog(requestParameters).then((res) => {
          return res
        })
      },
      tabKey: 1,
      searchArrTwo: [],
      columnsTwo: [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        { title: '所属分公司', dataIndex: 'branchCompanyName', ellipsis: true, width: 200 },
        { title: '所属项目', dataIndex: 'projectName', ellipsis: true, width: 500 },
        { title: '日期', dataIndex: 'statileDate', ellipsis: true, width: 120 },
        { title: '操作', dataIndex: 'action', width: 150, align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      visible: false,
      currentMonth: this.moment().format('YYYY-MM'),
      loading: false, // 加载控件
      monthData: [],
      monthId: null,
      currentChangeDate: null, //当前选中的日期
      currentChangeDateTime: null //当前选中的日期time
    }
  },
  computed: {
    searchArr() {
      return [
        // 搜索框
        {
          name: '所属单位',
          valueKey: 'searchQuery',
          type: OrgTreeSelect,
        },
        // { name: '所属分公司', valueKey: 'branchCompanyId', type: SelectSubCompany },
        // { name: '所属项目', keyValue: 'branchCompanyId', valueKey: 'projectId', type: SelectProject },

        { name: '填报人', type: 'input', value: 'creatorName' },
        {
          name: '填报时间',
          type: 'dateRange',
          value: 'createTime',
          attr: {
            rangeFormat: ['createTimeStart', 'createTimeEnd']
          }
        }
      ]
    },
    columns() {
      return [
        {
          title: '序号',
          width: 80,
          dataIndex: 'index',
          customRender() {
            return arguments[2] + 1
          }
        },
        { title: '所属分公司', dataIndex: 'branchCompanyName', ellipsis: true, width: 200 },
        { title: '所属项目', dataIndex: 'projectName', ellipsis: true, width: 500 },
        { title: '填报人', dataIndex: 'creatorName', ellipsis: true },
        { title: '填报人职务', dataIndex: 'creatorDept', ellipsis: true, width: 150 },
        { title: '日期', dataIndex: 'statileDate', ellipsis: true, width: 120 },
        { title: '状态', dataIndex: 'status', ellipsis: true, width: 150 },
        { title: '操作', dataIndex: 'action', width: 150, scopedSlots: { customRender: 'action' } }
      ]
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
      this.monthId = null
    },
    getNowMonthLastDay() {
      let now = new Date(),
        nowMonth = now.getMonth(),
        nowYear = now.getFullYear(), //当前年
        monthEndDate = new Date(nowYear, nowMonth + 1) //当前月份最后一天
      //   monthEndDate.setHours(23);
      //   monthEndDate.setMinutes(59);
      //   monthEndDate.setMilliseconds(59);
      console.log(monthEndDate)
      return monthEndDate
    },
    getListData(value) {
      let currentDay = this.moment(new Date()).format('YYYY-MM-DD'),
        parseIntDay = parseInt(this.moment(new Date()).format('DD')), //01转为1
        currentDayTime = this.getNowMonthLastDay(), //当前月份最后一天
        currentValue = this.moment(value).format('YYYY-MM'), //当前切换的月份
        currentValueDay = this.moment(value).format('DD'), //当前切换的所有日期 42个
        parseIntCurrentValueDay = parseInt(currentValueDay), ///01转为1
        listData
      console.log(currentDayTime, this.currentChangeDateTime)
      if (this.currentMonth === currentValue && currentDayTime >= this.currentChangeDateTime) {
        //当前传入的月份等于选中的月份和当前的日期要大于选中的日期
        if (!this.currentChangeDate || this.currentChangeDate === currentDay) {
          if (parseIntCurrentValueDay <= parseIntDay) {
            listData = this.setTatus(currentValueDay)
          }
        } else {
          listData = this.setTatus(currentValueDay)
        }
      }

      return listData || []
    },
    setTatus(day) {
      let status = []
      if (this.monthData.includes(day)) {
        status = [{ type: '1', content: '已填报' }]
      } else {
        status = [{ type: '0', content: '未填报' }]
      }
      return status
    },
    onPanelChange(value, mode) {
      let changeMonth = this.moment(value._d).format('YYYY-MM')
      this.currentChangeDateTime = value._d
      this.currentChangeDate = this.moment(value._d).format('YYYY-MM-DD')
      this.getMonthData(changeMonth)
      this.currentMonth = changeMonth
    },
    callback(e) {
      this.tabKey = e
      let searchArrTwo = this.$clone(this.searchArr),
        spliceSearchArrTwo = searchArrTwo.splice(2, 1)
      let columnsTwo = this.$clone(this.columns),
        spliceColumnsTwo = columnsTwo.splice(3, 2),
        spliceColumnsThree = columnsTwo.splice(4, 1)
      if (e * 1 === 2) {
        this.searchArrTwo = searchArrTwo
        // this.columnsTwo = columnsTwo
      }
    },
    //本月汇总
    handleSummary(res) {
      this.visible = true
      this.monthId = res.id ? res.id : null
      this.getMonthData(this.currentMonth)
    },
    async getMonthData(month) {
      this.loading = true
      this.monthData = []
      let data = await getNowMonthData({ id: this.monthId, month })
      if (data.data && data?.data?.length > 0) {
        data.data.map((item, index) => {
          this.$set(this.monthData, index, item)
        })
      }
      this.loading = false
    },
    // 搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
    },
    searchTwo(value) {
      value && (this.queryParam = value)
      this.$refs.tableTwo.refresh(true)
    },
    // 操作栏
    handleManage(type, record) {
      let query = {
        editModel: type,
        queryType: this.tabKey
      }
      if (record && (record.projectId || record.id)) {
        query.projectId = record.id ? record.id : record.projectId
        query.statileDate = record.statileDate
      }
      this.$router.push({
        name: record ? 'monitorLogDetail' : 'updateMonitor',
        query
      })
    }
  },
  created() {}
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.monitorLogList {
  @{deep} .ant-tabs-bar {
    background-color: #fff;
  }
}
.handleCancel {
  @{deep} .ant-radio-group {
    display: none;
  }
  @{deep} .ant-btn-primary {
    display: none;
  }
  .events {
    span {
      line-height: 18px;
      display: inline-block;
      padding: 0 5px;
      background-color: #fff2e8;
      border-radius: 2px;
      border: 1px solid #fa541c;
      color: #fa541c;
      &.active {
        background-color: #108ee9;
        color: #fff;
        border: 1px solid #108ee9;
      }
    }
  }
}
</style>
